<template>
	<view :style="{'--color': color}">
		<status-bar title='积分赠送' :goHome='fromShare'></status-bar>
		<view class="topBg bg00 p-re">
			<view class="card thmeBg padding40 p-ab white">
				<image :src="imgUrl + 'Uploads/User_img/shadingImg.png'" mode="aspectFill" class="wh p-ab"></image>
				<view class="note p-ab" @click="toUrl('giftRecord')">
					<text class="iconfont icon-shangpin"></text>
					<text class="size26 m-left10">赠送记录</text>
				</view>
				<view class="size26 m-bot20">可用积分</view>
				<view class="size60">{{ v_jifen_yue || 0 }}</view>
			</view>
		</view>
		<view class="padding30 m-top30">
			<view class="m-bot30">
				<view class="size26 m-bot20">赠送给：</view>
				<u-input v-model="phone" placeholder="请输入接受人昵称">
					<template slot="suffix">
						<view class="size26" style="color: #3c9cff" @click="verifyUser">验证</view>
					</template>
				</u-input>
			</view>
			<view class="d-flex a-center m-bot30" v-if="doneeInfo">
				<image :src="$imgUrls(doneeInfo.v_headimg)" mode="aspectFill" class="avatar"></image>
				<view class="p-left30 color_33">
					<view class="size32 bold m-bot4">{{ doneeInfo.v_name }}</view>
					<view class="size26">{{ doneeInfo.v_tel }}</view>
				</view>
			</view>
			<view class="m-bot30">
				<view class="size26 m-bot20">赠送积分：</view>
				<u-input v-model="point" placeholder="请输入积分" type="number"></u-input>
			</view>
			<!-- <view>
				<view class="size26 m-bot20">验证：</view>
				<u-input v-model="code" placeholder="请输入验证码">
					<template slot="suffix">
						<u-code ref="uCode" :seconds="60" changeText="x秒" @change="codeChange"></u-code>
						<u-button :text="tips" type="primary" size="small" @click="getCode"
							:customStyle="{padding: '0 8px !important'}"></u-button>
					</template>
				</u-input>
			</view> -->
		</view>
		<view class="btn thmeBg margin40 flexac size32 white" @click="handleDonate">发起赠送</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				fromShare: 0,
				imgUrl: this.imgUrl,
				v_jifen_yue: '',
				phone: '',
				doneeInfo: '', // 受赠人信息
				point: '',
				code: '',
				tips: '',
				fastClick: false
			}
		},
		computed: {
			...mapState(['color', 'userInfo'])
		},
		onLoad(e) {
			if (e.fromShare) this.fromShare = e.fromShare
			this.getPoint()
		},
		methods: {
			getPoint() { // 获取积分余额
				this.$http.post({
					url: '/cqzmqmH5Api/getConfig'
				}).then(res => {
					this.v_jifen_yue = res.data.jifen_yue
				})
			},
			verifyUser() {
				if (!this.phone) return this.$Toast('手机号不能为空')
				// uView自带手机号验证方法，返回true则通过
				// if (!uni.$u.test.mobile(this.phone)) return this.$Toast('手机号码不正确')
				this.$http.post({
					url: '/osmxcxApi/phoneGetUserInfo',
					data: {
						phone: this.phone
					}
				}).then(res => {
					if (res.errcode != 100) return this.$Toast(res.msg)
					if (!res.data.v_id) return this.$Toast('该用户不存在')
					this.doneeInfo = res.data
				})
			},
			codeChange(text) {
				this.tips = text
			},
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					this.$showLoading('正在获取验证码')
					this.$http.post({
						url: '/zzj_singleSaleApi/reverCode',
						data: {
							phone: this.userInfo.phone
						}
					}).then(res => {
						this.$hideLoading()
						if (!res.status) return this.$Toast(res.msg)
						this.$Toast('验证码已发送')
						// 开始倒计时
						this.$refs.uCode.start()
					})
				}
			},
			handleDonate() {
				if (!this.point) return this.$Toast('请输入积分')
				if (!this.doneeInfo) return this.$Toast('请验证受赠人')
				// if (!this.code) return this.$Toast('验证码不能为空')
				if (this.fastClick) return
				this.fastClick = true

				this.$http.post({
					url: '/osmxcxApi/giveFen',
					data: {
						phone: this.phone,
						give_v_id: this.doneeInfo.v_id,
						giveFen: this.point,
						// code: this.code
					}
				}).then(res => {
					this.fastClick = false
					if (res.errcode != 100) return this.$Toast(res.msg)
					this.$Toast('赠送成功')
					this.getPoint()
					this.point = ''
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.topBg {
		height: 200rpx;

		.card {
			width: 690rpx;
			height: 200rpx;
			left: 30rpx;
			top: 30rpx;
			z-index: 10;

			image {
				top: 0;
				left: 0;
				z-index: -1;
			}

			.note {
				right: 20rpx;
				top: 20rpx;
			}
		}
	}

	.avatar {
		width: 106rpx;
		height: 106rpx;
		border-radius: 50%;
	}

	.btn {
		width: 300rpx;
		height: 80rpx;
		border-radius: 40rpx;
	}
</style>